<template>
  <!-- <op-table-page-vir></op-table-page-vir> -->

  <op-dialog v-model="visible" size="big" height="500px" title="Choose">
    <div class="root">
      <op-table-page
        ref="tableLeftRef"
        title="Material List"
        searchPlaceholder="Search or Select"
        :showExport="false"
        :showPagination="false"
        width="100%"
        v-bind="{ ...tableConfig, ...tablePageConfig }"
        :requestParams="requestParams"
      ></op-table-page>
      <op-table-page ref="tableRightRef" :showPagination="false" v-bind="{ ...tableConfig }">
        <template #tableHeader>
          <div style="height: 24px; padding-bottom: 8px">Selected({{ 2 }})</div>
        </template>
      </op-table-page>
    </div>
  </op-dialog>
</template>
<script setup>
import { ElMessage } from 'element-plus';
import { apiMethods } from '@/utils/http';
import { tableConfig, tablePageConfig } from './tableConfig';
const props = defineProps({});
const emit = defineEmits([]);

// ref
const tableLeftRef = ref();
const tableRightRef = ref();

const visible = ref(true);

const requestParams = ref({
  organizationCode: 'MCC',
  searchKey: '',
});

const init = () => {};
</script>

<style lang="scss" scoped>
.root {
  border: solid 1px #e5e6ec;
  height: 100%;
  display: flex;
  gap: 10px;
  padding: 8px;
  box-sizing: border-box;
  .table_page {
    width: 100%;
  }
}
</style>
